<template>
  <div class="custom-tabs">
    <template v-for="(item,index) in state.buttons">
      <div :class="buttonsOpt[item].class"
           @click="buttonsOpt[item].action">
        {{ buttonsOpt[item].label }}
      </div>
    </template>
    <ReturnFormDialog ref="returnDialogRef"
                      :content="state.dialogContent"
                      @submit="page.handleSubmitReturnReason"
                      @close="page.handleDialogClose"/>
  </div>
</template>

<script lang="ts" setup>
import {useRoute, useRouter} from 'vue-router'
import {getCurrentInstance, ref, reactive, watch, onBeforeMount} from 'vue'
import ReturnFormDialog from "/@/views/enterpriseManager/component/returnFormDialog.vue";
import {approveMark} from "/@/views/enterpriseManager/dictionary/constant";
import {entApplyApproved} from "/@/api/entEntry/entApply";
import router from "/@/router";
import {getButtons} from "/@/api/manage/userPermission";

const emit = defineEmits(['refresh', 'goBack', 'approve', 'upload', 'select']);

const route = useRoute()
const returnDialogRef = ref<{ openDialog: () => void }>();
const props = defineProps({
  pageName: {
    type: String,
    default: ''
  },
  approveStatus: {
    type: String,
    default: ''
  }
})
const buttonsOpt = {
  back: {
    label: `返 回`,
    class: 'custom-tab-btn',
    action: () => {
      router.go(-1);
    }
  },
  return: {
    label: `退 回`,
    class: 'custom-tab-btn custom-tab-btn-return',
    action: () => {
      page.openReturnDialog(approveMark.RETURN_FOR_MODIFY);
    }
  },
  fail: {
    label: `不通过`,
    class: 'custom-tab-btn custom-tab-btn-fail',
    action: () => {
      page.openReturnDialog(approveMark.REFUSE_MOVE_IN);
    }
  },
  approve: {
    label: `通 过`,
    class: 'custom-tab-btn custom-tab-btn-pass',
    action: () => {
      page.approved(approveMark.APPROVED);
    }
  },
  upload: {
    label: `上传资料`,
    class: 'custom-tab-btn',
    action: () => {
      page.upload(approveMark.APPROVED);
    }
  },
  allocation: {
    label: `分配科创经纪人`,
    class: 'custom-tab-btn',
    action: () => {
      page.allocation(approveMark.APPROVED);
    }
  },
  select: {
    label: `选择合作伙伴或服务专员`,
    class: 'custom-tab-btn',
    action: () => {
      page.select(approveMark.APPROVED);
    }
  },
}
const state = reactive({
  buttons: [],
  dialogContent: "",
})
const page = {
  init: async () => {
    try {
      const buttonRes = await getButtons(props.pageName, props.approveStatus);
      console.log(buttonRes)
      if (!buttonRes.success) {
        console.error('获取按钮权限失败:', res.msg);
        return;
      }

      state.buttons = buttonRes.data;
    } catch (e) {
      console.error('获取按钮权限时发生错误:', e);
    }
  },
  openReturnDialog: (code: string) => {
    state.dialogContent = code == approveMark.RETURN_FOR_MODIFY ? "请填写退回原因" : "请填写不通过原因";
    returnDialogRef.value?.openDialog(code);
  },
  handleSubmitReturnReason: (res: object) => {
    page.approved(res.approveMark, {returnContent: res.returnContent});
  },
  handleDialogClose: () => {

  },
  approved: async (approveMark: string, queryObj?: object) => {
    emit('approve', {approveMark: approveMark, queryObj: queryObj});
  },
  upload: (approveMark: string) => {
    emit('upload', {approveMark: approveMark});
  },
  allocation: (approveMark: string) => {
    emit('approve', {approveMark: approveMark});
  },
  select: (approveMark: string) => {
    emit('select', {approveMark: approveMark});
  }
}
onBeforeMount(() => {
  //page.init()
})

watch(
    () => [props.pageName, props.approveStatus],
    () => {
      if (props.pageName != undefined && props.approveStatus != undefined) {
        page.init();
      }
    });
</script>

<style lang="scss" scoped>
.custom-tabs {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 20px;

  .custom-tab-btn {
    padding: 10px 28px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
  }

  /* 通过按钮 - 绿色系 (传递成功/积极信号) */
  .custom-tab-btn-pass {
    color: #ffffff;
    background-color: #2ecc71; /* 更柔和的成功绿 */
    border-color: #27ae60;
    transition: all 0.3s;
  }

  .custom-tab-btn-pass:hover {
    background-color: #27ae60; /* 悬停加深 */
  }

  /* 退回按钮 - 蓝色系 (中性操作) */
  .custom-tab-btn-return {
    color: #ffffff;
    background-color: #3498db; /* 友好的蓝色 */
    border-color: #2980b9;
    transition: all 0.3s;
  }

  .custom-tab-btn-return:hover {
    background-color: #2980b9;
  }

  /* 不通过按钮 - 橙红色系 (警示但不过于强烈) */
  .custom-tab-btn-fail {
    color: #ffffff;
    background-color: #e74c3c; /* 比纯红更温和 */
    border-color: #c0392b;
    transition: all 0.3s;
  }

  .custom-tab-btn-fail:hover {
    background-color: #c0392b;
  }

}

</style>
